<template>
  <div class="studyContainer">
    <!-- ==================== 学科评价值板块 ==================== -->
    <div class="box1">
      <div class="title">
        学科评价值

      </div>
             <div class="chengJJL-container">
         <div ref="barChartRef" class="chart-container"></div>
       </div>
    </div>
    
    <!-- ==================== 考核偏离值板块 ==================== -->
    <div class="box1">
      <div class="title">考核偏离值</div>
      <div class="chengJJL-container" style="position: relative">
        <!-- 班级下拉框 -->
        <select
          v-model="selectedClass"
          :disabled="!classOptions.length"
          class="custom-select"
          @change="handleClassChange"
        >
          <option value="" disabled>
            {{ !classOptions.length ? (deviationData.length === 0 ? '暂无班级' : '加载中...') : '请选择班级' }}
          </option>
          <option
            v-for="item in classOptions"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </option>
        </select>
        <div ref="chartRefA" class="chart-container"></div>
      </div>
    </div>
    
    <!-- ==================== 评价值趋势预测板块 ==================== -->
    <div class="box1">
      <div class="title">评价值趋势预测</div>
      <div class="chengJJL-container">
        <div ref="lineChartRef" class="chart-container"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
// ==================== 导入依赖 ====================
import { ref, onMounted, reactive,nextTick, watch, onUnmounted } from "vue";
import * as echarts from "echarts";
import { getTeachingQualityEvaluation } from "@/api/teacher";
import { useRoute } from "vue-router";

// ==================== 路由参数获取 ====================
const route = useRoute();

// ==================== 考核偏离值相关数据 ====================
// 班级选项数据
const classOptions = ref([]);
const selectedClass = ref("");

// 考核偏离值数据
const deviationData = ref([]);

// ==================== 学科评价值相关数据 ====================
// 学科评价值数据
const teachingQualityData = ref([]);
const isLoading = ref(false);
const refreshInterval = ref(null);

// ==================== 图表引用和实例 ====================
let chartRefA = ref(null);
let chartA = ref(null);

let lineChartRef = ref(null);
let lineChart = ref(null);

let barChartRef = ref(null);
let barChart = ref(null);

// 图表颜色配置
const colorList = ["#00FFF0", "#00FFB2", "#faff0d"];

// ==================== 考核偏离值相关函数 ====================
// 获取考核偏离值数据
const fetchDeviationData = async (teacherCode) => {
  try {
    // 立即清空图表显示加载状态
    if (chartA.value) {
      chartA.value.clear();
      chartA.value.setOption({
        title: {
          text: "数据加载中...",
          left: "center",
          top: "middle",
          textStyle: {
            color: "#00D1FF",
            fontSize: 14
          }
        }
      });
    }
    // 强制清空之前图表数据
    const response = await getTeachingQualityEvaluation(teacherCode);
    if (response.data && response.data.length > 0) {
      // 更新图表数据
      deviationData.value = response.data;
      
      // 更新班级选项
      const uniqueClasses = [...new Set(response.data.map(item => item.bjmc))];
      // 去重后生成班级选项
      classOptions.value = uniqueClasses.map(className => ({
        label: className,
        value: className
      }));
      
      // 设置默认选中的班级为第一个数据
      if (classOptions.value.length > 0) {
        // 设置默认选中的班级为第一个数据
        selectedClass.value = classOptions.value[0].value;
        // 立即更新图表，确保默认显示第一个班级的数据
        updateChartA();
      } else {
        updateChartA();
      }
    } else {
      // 没有数据时清空
      deviationData.value = [];
      classOptions.value = [];
      selectedClass.value = "";
      updateChartA();
    }
  } catch (error) {
    console.error('获取考核偏离值数据失败:', error);
    // 错误时也要清空数据并更新图表
    deviationData.value = [];
    classOptions.value = [];
    selectedClass.value = "";
    updateChartA();
  }
};

// ==================== 学科评价值相关函数 ====================
// 获取学科评价值数据
const fetchTeachingQualityData = async (teacherCode) => {
  try {
    isLoading.value = true;
    // 强制清空之前的数据和图表
    teachingQualityData.value = [];
    if (barChart.value) {
      barChart.value.clear();
      barChart.value.dispose();
      barChart.value = echarts.init(barChartRef.value);
    }
    if (lineChart.value) {
      lineChart.value.clear();
    }
    
    // 立即显示空状态
    updateBarChart();
    updateLineChart();
    
    const response = await getTeachingQualityEvaluation(teacherCode);
    teachingQualityData.value = response.data || [];
    // 强制更新柱状图
    updateBarChart();
    updateLineChart();
  } catch (error) {
    console.error('获取学科评价值数据失败:', error);
    teachingQualityData.value = [];
    updateBarChart();
    updateLineChart();
  } finally {
    isLoading.value = false;
  }
};

// ==================== 自动刷新相关函数 ====================
// 开始自动刷新
const startAutoRefresh = (teacherCode) => {
  // 清除之前的定时器
  if (refreshInterval.value) {
    clearInterval(refreshInterval.value);
  }
  
  // 强制清空当前图表
  if (barChart.value) {
    barChart.value.clear();
    barChart.value.dispose();
    barChart.value = echarts.init(barChartRef.value);
  }
  
  // 立即获取一次数据
  fetchTeachingQualityData(teacherCode);
  
  // 设置定时器，每30秒自动刷新一次
  refreshInterval.value = setInterval(() => {
    if (teacherCode) {
      fetchTeachingQualityData(teacherCode);
    }
  }, 30000); // 30秒刷新一次
};

// 停止自动刷新
const stopAutoRefresh = () => {
  if (refreshInterval.value) {
    clearInterval(refreshInterval.value);
    refreshInterval.value = null;
  }
};

// 手动刷新
const manualRefresh = () => {
  const teacherCode = route.query.personCode;
  if (teacherCode && !isLoading.value) {
    fetchTeachingQualityData(teacherCode);
  }
};

// 强制刷新图表
const forceRefreshChart = () => {
  if (barChart.value) {
    barChart.value.clear();
    barChart.value.dispose();
    barChart.value = echarts.init(barChartRef.value);
    updateBarChart();
  }
};

// ==================== 图表更新函数 ====================
// 更新柱状图数据
const updateBarChart = () => {
  if (!barChart.value) return;
  
  // 强制清空图表并重新初始化
  barChart.value.clear();
  barChart.value.dispose();
  barChart.value = echarts.init(barChartRef.value);
  
  if (!teachingQualityData.value || teachingQualityData.value.length === 0) {
    // 没有数据时显示空图
    const emptyOption = {
      color: colorList,
      legend: {
        show: false
      },
      title: {
        text: "暂无数据",
        left: "center",
        top: "middle",
        textStyle: {
          color: "#00D1FF",
          fontSize: 14
        }
      },
      grid: {
        top: 50,
        right: 60,
        bottom: 30,
        left: 50,
      },
      xAxis: {
        show: false
      },
      yAxis: {
        show: false
      },
      series: []
    };
    barChart.value.setOption(emptyOption);
    return;
  }

  // 处理数据，按考试场次分组
  const examSessions = [...new Set(teachingQualityData.value.map(item => item.ksmc))];
  const classes = [...new Set(teachingQualityData.value.map(item => item.bjmc || item.className))];
  
  // 生成系列数据
  const series = classes.map((className, index) => {
    const data = examSessions.map(session => {
      const item = teachingQualityData.value.find(data => 
        data.ksmc === session && (data.bjmc === className || data.className === className)
      );
      return item ? item.pjz : 0;
    });
    
    return {
      name: className,
      type: "bar",
      barWidth: 14,
      data: data,
      label: {
        show: false,
        position: "top",
        formatter: "{c}",
      }
    };
  });

  const option = {
    color: colorList,
    legend: {
      data: classes,
      top: 10,
      textStyle: {
        fontSize: 12,
        color: function (params) {
          return params.color;
        },
      },
    },
    title: {
      text: "评价值",
      top: 20,
      textStyle: {
        color: "#00D1FF",
        fontSize: 10,
        lineHeight: 10,
      },
    },
          grid: {
        top: 50,
        right: 60,
        bottom: 30,
        left: 50,
      },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: '#00a7ff',
      borderWidth: 1,
      textStyle: {
        color: '#fff',
        fontSize: 12
      },
      formatter: function(params) {
        let result = `<div style="padding: 8px;">
          <div style="font-weight: bold; margin-bottom: 8px; color: #00a7ff;">
            ${params[0].axisValue}
          </div>`;
        
        params.forEach(param => {
          const color = param.color;
          const value = param.value;
          const name = param.seriesName;
          
          result += `
            <div style="display: flex; align-items: center; margin: 4px 0;">
              <span style="display: inline-block; width: 10px; height: 10px; background: ${color}; margin-right: 8px; border-radius: 2px;"></span>
              <span style="color: #fff; margin-right: 8px;">${name}:</span>
              <span style="color: #00a7ff; font-weight: bold;">${value}</span>
            </div>
          `;
        });
        
        result += '</div>';
        return result;
      }
    },
    xAxis: {
      data: examSessions,
      axisLine: {
        lineStyle: {
          color: "#0094ff",
        },
      },
      axisTick: {
        lineStyle: {
          color: "#0094ff",
        },
      },
      axisLabel: {
        color: "#fff",
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#00D1FF",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#0094ff",
        },
      },
      axisLabel: {
        show: true,
      },
    },
    series: series
  };
  
  barChart.value.setOption(option);
};

// 更新评价值趋势预测（折线图）
const updateLineChart = () => {
  if (!lineChart.value) return;

  // 清空图表
  lineChart.value.clear();
// 强制清空图表并重新初始化
  if (!teachingQualityData.value || teachingQualityData.value.length === 0) {
    const emptyOption = {
      color: colorList,
      legend: { show: false },
      title: {
        text: "暂无数据",
        left: "center",
        top: "middle",
        textStyle: { color: "#00D1FF", fontSize: 14 }
      },
      grid: { top: 50, right: 60, bottom: 30, left: 50 },
      xAxis: { show: false },
      yAxis: { show: false },
      series: []
    };
    lineChart.value.setOption(emptyOption);
    return;
  }

  // 计算考试场次（按考试时间排序），x 轴显示 ksmc
  const examMap = new Map();
  teachingQualityData.value.forEach(item => {
    const key = item.ksmc;
    const time = item.kssj ? new Date(item.kssj).getTime() : 0;
    if (!examMap.has(key)) {
      examMap.set(key, time);
    } else {
      // 取最小时间，确保同名考试按最早时间排序
      examMap.set(key, Math.min(examMap.get(key), time));
    }
  });
  // 按考试时间排序
  const examSessions = Array.from(examMap.entries())
    .sort((a, b) => a[1] - b[1])
    .map(entry => entry[0]);

  // 动态图例（班级）
  const classes = [...new Set(teachingQualityData.value.map(item => item.bjmc || item.className))];

  // 生成系列（每个班级一条折线，y 轴为 pjz）
  const series = classes.map(className => {
    const data = examSessions.map(session => {
      const record = teachingQualityData.value.find(d =>
        d.ksmc === session && (d.bjmc === className || d.className === className)
      );
      // 使用 null 表示该班在该考试无数据，防止折线误连到 0
      return record && (record.pjz || record.pjz === 0) ? record.pjz : null;
    });
    return {
      name: className,
      type: "line",
      symbol: "circle",
      symbolSize: 6,
      connectNulls: false,
      data
    };
  });

  const option = {
    color: ["#00FFF0", "#00FFB2", "#faff0d", "#00a7ff", "#ff7f50", "#9acd32", "#da70d6", "#87cefa"],
    tooltip: {
      trigger: "axis",
      axisPointer: { type: "line" },
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: '#00a7ff',
      borderWidth: 1,
      textStyle: { color: '#fff', fontSize: 12 },
      formatter: function(params) {
        let result = `<div style="padding: 8px;">
          <div style="font-weight: bold; margin-bottom: 8px; color: #00a7ff;">${params[0].axisValue}</div>`;
        params.forEach(param => {
          const color = Array.isArray(param.color) ? param.color[0] : param.color;
          result += `
            <div style="display: flex; align-items: center; margin: 4px 0;">
              <span style="display: inline-block; width: 10px; height: 10px; background: ${color}; margin-right: 8px; border-radius: 2px;"></span>
              <span style="color: #fff; margin-right: 8px;">${param.seriesName}:</span>
              <span style="color: #00a7ff; font-weight: bold;">${param.value ?? '-'}</span>
            </div>`;
        });
        result += '</div>';
        return result;
      }
    },
    legend: {
      show: true,
      data: classes,
      left: 'center',
      top: 10,
      textStyle: {
        fontSize: 12,
        color: function (params) { return params.color; }
      }
    },
    grid: { top: 40, right: 60, bottom: 20, left: 30, containLabel: true },
    xAxis: {
      type: 'category',
      data: examSessions,
      axisLine: { lineStyle: { color: '#0094FF' } },
      axisTick: { lineStyle: { color: '#0094FF' } },
      splitLine: { lineStyle: { color: '#0094FF' } },
      axisLabel: { color: '#FFFFFF' }
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#0094FF' } },
      axisLabel: { color: '#00D1FF', fontSize: 10, fontWeight: 'bold' },
      splitLine: { lineStyle: { color: '#0094FF' } }
    },
    series
  };

  lineChart.value.setOption(option);
};

// 更新考核偏离值图表
const updateChartA = () => {
  if (!chartA.value) return;

  // 如果没有数据或没有选中班级，显示空状态
  if (!deviationData.value.length || !selectedClass.value) {
    const emptyOption = {
      color: colorList,
      title: {
        text: "暂无数据",
        left: "center",
        top: "middle",
        textStyle: {
          color: "#00D1FF",
          fontSize: 14
        }
      },
      grid: {
        top: 50,
        right: 60,
        bottom: 30,
        left: 50,
      },
      xAxis: { show: false },
      yAxis: { show: false },
      series: []
    };
    chartA.value.setOption(emptyOption);
    return;
  }

  // 根据选中的班级筛选数据
  const filteredData = deviationData.value.filter(item => item.bjmc === selectedClass.value);
  
  // 如果筛选后没有数据，显示该班级暂无数据
  if (!filteredData.length) {
    const noDataOption = {
      color: colorList,
      title: {
        text: `${selectedClass.value} 暂无数据`,
        left: "center",
        top: "middle",
        textStyle: {
          color: "#00D1FF",
          fontSize: 14
        }
      },
      grid: {
        top: 50,
        right: 60,
        bottom: 30,
        left: 30,
      },
      xAxis: { show: false },
      yAxis: { show: false },
      series: []
    };
    chartA.value.setOption(noDataOption);
    return;
  }
  
  // 按考试时间排序
  filteredData.sort((a, b) => new Date(a.kssj) - new Date(b.kssj));

  // 准备图表数据
  const xAxisData = filteredData.map(item => item.ksmc);
  const deviationValues = filteredData.map(item => item.plz);
  
  // 计算偏离变化值（当前偏离值减去上一次的偏离值）
  const changeValues = deviationValues.map((value, index) => {
    if (index === 0) return 0;
    return value - deviationValues[index - 1];
  });

  const option = {
    color: colorList,
    legend: {
      data: ["偏离值", "偏离变化值"],
      top: 10,
      textStyle: {
        fontSize: 12,
        color: function (params) {
          return params.color;
        },
      },
    },
    title: {
      text: "分值",
      top: 20,
      textStyle: {
        color: "#00D1FF",
        fontSize: 10,
        lineHeight: 10,
      },
    },
    grid: {
      top: 50,
      right: 60,
      bottom: 30,
      left: 50,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function(params) {
        let result = `<div style="padding: 8px;">
          <div style="font-weight: bold; margin-bottom: 8px; color: #00a7ff;">
            ${params[0].axisValue}
          </div>`;
        
        params.forEach(param => {
          const color = param.color;
          const value = param.value;
          const name = param.seriesName;
          
          result += `
            <div style="display: flex; align-items: center; margin: 4px 0;">
              <span style="display: inline-block; width: 10px; height: 10px; background: ${color}; margin-right: 8px; border-radius: 2px;"></span>
              <span style="color: #fff; margin-right: 8px;">${name}:</span>
              <span style="color: #00a7ff; font-weight: bold;">${value}</span>
            </div>
          `;
        });
        
        result += '</div>';
        return result;
      }
    },
    xAxis: {
      data: xAxisData,
      axisLine: {
        lineStyle: {
          color: "#0094ff",
        },
      },
      axisTick: {
        lineStyle: {
          color: "#0094ff",
        },
      },
      axisLabel: {
        color: "#fff",
        rotate: 0
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#00D1FF",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#0094ff",
        },
      },
      axisLabel: {
        show: true,
      },
    },
    series: [
      {
        name: "偏离值",
        type: "bar",
        barWidth: 14,
        data: deviationValues,
        label: {
          show: false,
          position: "top",
          formatter: "{c}",
        },
      },
      {
        name: "偏离变化值",
        type: "line",
        data: changeValues,
        symbol: "circle",
        symbolSize: 6,
      },
    ],
  };
  chartA.value.setOption(option);
};

// ==================== 图表初始化函数 ====================
// 初始化考核偏离值图表
const initChartA = () => {
  chartA.value = echarts.init(chartRefA.value);
  // 获取教师编号并获取数据
  const teacherCode = route.query.personCode;
  if (teacherCode) {
    fetchDeviationData(teacherCode);
  } else {
    // 如果没有教师编号，显示空状态
    updateChartA();
  }
};

// 初始化学科评价值图表
const initChartE = () => {
  barChart.value = echarts.init(barChartRef.value);
  // 初始化时获取数据并开始自动刷新
  const teacherCode = route.query.personCode;
  if (teacherCode) {
    startAutoRefresh(teacherCode);
  }
};

// 初始化评价值趋势预测图表
function initChartD() {
  lineChart.value = echarts.init(lineChartRef.value);
  // 初始渲染（无数据时展示空状态）
  updateLineChart();
}

// ==================== 生命周期钩子 ====================
onMounted(() => {
  nextTick(() => {
    initChartA();
    initChartD();
    initChartE();

    window.addEventListener("resize", function () {
      lineChart.value.resize();
      barChart.value.resize();
      chartA.value.resize();
    });
  })
});

// 组件卸载时清理定时器
onUnmounted(() => {
  stopAutoRefresh();
});

// ==================== 监听器和事件处理 ====================
// 监听路由参数变化，重新获取数据
watch(() => route.query.personCode, (newTeacherCode) => {
  if (newTeacherCode && barChartRef.value) {
    // 停止之前的自动刷新
    stopAutoRefresh();
    
    // 强制清空当前图表
    if (barChart.value) {
      barChart.value.clear();
      barChart.value.dispose();
    }
    
    // 重新初始化图表
    barChart.value = echarts.init(barChartRef.value);
    
    // 开始新的自动刷新
    startAutoRefresh(newTeacherCode);
  }

  // 重新获取考核偏离值数据
  if (newTeacherCode && chartA.value) {
    // 重置选中状态，确保重新设置默认值
    selectedClass.value = "";
    fetchDeviationData(newTeacherCode);
  } else if (!newTeacherCode && chartA.value) {
    // 如果没有教师编号，清空数据并显示空状态
    deviationData.value = [];
    classOptions.value = [];
    selectedClass.value = "";
    updateChartA();
  }

  // 折线图根据教师编号变化刷新
  if (newTeacherCode && lineChart.value) {
    // 清空并等待新数据
    lineChart.value.clear();
    fetchTeachingQualityData(newTeacherCode);
  } else if (!newTeacherCode && lineChart.value) {
    teachingQualityData.value = [];
    updateLineChart();
  }
});

// 处理班级选择变化
const handleClassChange = (event) => {
  console.log('班级选择变化:', event.target.value);
  selectedClass.value = event.target.value;
};

// 监听班级选择变化，立即更新图表
watch(selectedClass, (newClass, oldClass) => {
  if (chartA.value && newClass && newClass !== oldClass) {
    // 立即清空当前图表
    chartA.value.clear();
    
    // 立即更新图表数据
    updateChartA();
  }
}, { immediate: false });
</script>
<style scoped="studyContainer" lang="scss">
.chart-container {
  width: 100%;
  height: 100%;
}



.studyContainer {
  gap: 10px;
  height: 100%;

  .title {
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: left;
    vertical-align: middle;
    border-left: 4px solid #00a7ff;
    padding-left: 10px;
    border-radius: 2px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .refresh-btn {
      background: transparent;
      border: 1px solid #00a7ff;
      color: #00a7ff;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.3s;
      
      &:hover:not(:disabled) {
        background: #00a7ff;
        color: #fff;
      }
      
      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
    }
  }

  .box1 {
    margin: 0px auto;
    box-sizing: border-box;
    width: 99%;
    height: 33%;

    .chengJJL-container {
      width: 100%;
      height: calc(100% - 25px);
      display: flex;
      flex-direction: column;
      gap: 2px;

      .chengJJL-item {
        flex: 30%;
        width: 100%;
        display: flex;
        gap: 2px;

        .chengJJL-itembox-left {
          flex: 30%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          position: relative;

          .score {
            width: 100%;
            font-size: 65px;
            color: #00d1ff;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 10px;
            text-shadow: 5px 3px 6px rgba(0, 148, 255, 0.8),
              -2px -2px 4px rgba(255, 255, 255, 0.5);
            font-family: YSBiaoTiHei-regular;
            margin-top: 30px;
          }

          .score-p {
            color: #e5e5e5;
            font-family: "HarmonySansSC", sans-serif;
            font-size: 14px;
          }

          .score-img {
            position: absolute;
            top: -10px;
            right: 35px;
            width: 71px;
            height: 64px;
            /* border: 1px solid red; */
          }
        }

        .chengJJL-itembox-right {
          flex: 50%;
          padding: 0 30px;
        }

        .chengJJL-itembox {
          flex: 1;
          .s-title {
            color: #80d3ff;
            font-size: 14px;
          }
        }
      }
    }
  }

  .box2 {
    margin: 0px auto;
    box-sizing: border-box;
    height: calc(40% - 10px);
    width: 99%;

    .xuekjhd-container {
      display: flex;
      gap: 2px;
      height: calc(100% - 25px);

      .xuekjhd-itembox-left {
        flex: 40%;
        height: 100%;
      }

      .xuekjhd-itembox-right {
        flex: 60%;
        display: flex;
        align-items: center;
        justify-items: center;
        padding-left: 20px;
        padding-right: 10px;
        height: 100%;
        color: #fff;

        p {
          line-height: 30px;
        }
      }
    }
  }

  .table-container {
    border: 1px solid #00dffd;
    border-radius: 3px;
    overflow: hidden;

    .table-row {
      display: flex;
      font-size: 14px;
      line-height: 20px;
      img {
        width: 27px;
        height: 27px;
        margin-right: 8px;
      }
    }

    .table-cell {
      padding: 0.75rem;
      border-right: 1px solid #00dffd;
      border-bottom: 1px solid #00dffd;
    }

    /* 列宽设置 */
    .col-30 {
      width: 30%;
      font-size: 14px;
    }

    .col-70 {
      width: 70%;
      font-size: 14px;
    }

    /* 去除最后一行的下边框和最后一列的右边框 */
    .table-row:last-child .table-cell {
      border-bottom: none;
    }

    .table-cell:last-child {
      border-right: none;
    }
  }
  .score-date {
    font-size: 12px;
    color: #00d1ff;
  }
}
.legend {
  border: 1px solid #00ffff;
  background: rgba(0, 255, 255, 0.2);
  padding: 6px 10px;
  border-radius: 10px;
  margin: 4px 0;
  font-size: 12px;
}
.legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}
.legend-a {
  border-bottom: 1px solid #00a372;
  font-size: 17px;
  text-align: center;
  color: #00d1ff;
  padding-bottom: 8px;
}
.legend-content {
  margin-top: 8px;
  font-size: 12px;
}

.custom-select {
  background: rgba(0, 167, 255, 0.1);
  border: 1px solid #00a7ff;
  color: #fff;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  outline: none;
  transition: all 0.3s ease;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 60px;
  width: 80px;
  z-index: 1000;
  height: 22px;
}

.custom-select:hover {
  border-color: #00d1ff;
  background: rgba(0, 167, 255, 0.2);
}

.custom-select:focus {
  border-color: #00d1ff;
  box-shadow: 0 0 5px rgba(0, 209, 255, 0.5);
  background: rgba(0, 167, 255, 0.2);
}

.custom-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(0, 167, 255, 0.05);
}

.custom-select option {
  background: #2a2a2a !important;
  color: #fff !important;
  padding: 8px 12px;
  border: none;
  cursor: pointer;
  min-height: 30px;
}

.custom-select option:hover {
  background: #00a7ff !important;
  color: #fff !important;
}

.custom-select option:checked {
  background: #00d1ff !important;
  color: #000 !important;
}

/* 确保下拉列表显示在最前面 */
.chengJJL-container {
  position: relative;
  overflow: visible !important;
}
</style>
